<template>
    <el-row class="page">
      <!-- 导航栏 -->
      <Navigation v-bind:navi_index="navi_index"/>

      <!-- 页面内容 -->
      <el-col :span="24">

        <!-- 拦截管理 -->
        <el-form
          :inline="true"
          style="margin-top:40px;text-align:center">
          <el-form-item>
            <el-switch v-model="global_inactive" active-text="全局关闭拦截" @change="onChangeGlobalInactive"></el-switch>
          </el-form-item>
        </el-form>

        <!-- 后台端口号设置 -->
        <el-form
          :inline="true"
          style="margin-top:40px;text-align:center">
          <el-form-item label="后台端口号：">
            <el-input
              placeholder="设置端口号" v-model="admin_port" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSwitchAdminPort">设置</el-button>
            <el-button type="info" @click="onResetAdminPort">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 代理端口号设置 -->
        <el-form
          :inline="true"
          style="margin-top:40px;text-align:center">
          <el-form-item label="代理端口号：">
            <el-input
              placeholder="设置端口号" v-model="proxy_port" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSwitchProxyPort">设置</el-button>
            <el-button type="info" @click="onResetProxyPort">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 后台重启关闭 -->
        <el-form
          :inline="true"
          style="margin-top:40px;text-align:center">
          <el-form-item>
            <el-button type="danger" round @click="onRestartServer">重启服务</el-button>
            <el-button type="warning" round @click="onRestartProxy">重启代理</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
</template>

<style>
/* el-input样式 */
.el-input__inner {
  width: 270px;
}
</style>

<script>
import Navigation from '../components/Navigation'
export default {
  components: {
    'Navigation': Navigation
  },
  data () {
    return {
      // 导航栏index
      navi_index: 'setup',
      // 折叠栏index
      collapse_name: 'serv_setup',
      // 绑定后台端口号
      admin_port: 0,
      // 绑定代理端口号
      proxy_port: 0,
      // 是否开启全局拦截
      global_inactive: false,
      // 表单数据
      load_info: {}
    }
  },
  mounted: function () {
    this.loadSetupInfo()
  },
  methods: {
    // 页面加载数据方法
    loadSetupInfo () {
      this.$http.get('/func/loadSetupInfo').then((res) => {
        if (res.status === 200) {
          this.load_info = res.body
          this.admin_port = res.body.AdminPort
          this.proxy_port = res.body.ProxyPort
          this.global_inactive = res.body.GlobalInactive === 1
        }
      })
    },
    // 切换全局拦截开关状态
    onChangeGlobalInactive (enable) {
      this.$confirm('确定要关闭临时关闭全局所有接口的拦截吗？')
        .then(_ => {
          this.$http.get('/func/setServerPort', {
            params: {
              type: 2, // 0为后台，1为代理 2修改
              globalInactive: enable ? 1 : 0
            }
          })
            .then((res) => {
              if (res.status === 200) {
                this.$notify({
                  message: '后台服务正在重启，稍后请刷新页面！',
                  type: 'success'
                })
              }
            })
        })
        .catch(_ => {})
    },
    // 重置管理端口
    onResetAdminPort () {
      this.admin_port = this.load_info.AdminPort
    },
    // 重置代理端口
    onResetProxyPort () {
      this.proxy_port = this.load_info.ProxyPort
    },
    // 切换代理端口
    onSwitchProxyPort () {
      if (this.proxy_port === this.load_info.ProxyPort) {
        return
      }
      this.$confirm('确定将服务器的代理端口号重置为：' + this.proxy_port + '，并重启服务器？')
        .then(_ => {
          this.$http.get('/func/setServerPort', {
            params: {
              type: 1, // 0为后台，1为代理
              port: this.proxy_port
            }
          })
            .then((res) => {
              if (res.status === 200) {
                this.$notify({
                  message: '代理服务正在重启！',
                  type: 'success'
                })
              }
            })
        })
        .catch(_ => {})
    },
    // 切换后台端口号
    onSwitchAdminPort () {
      if (this.admin_port === this.load_info.AdminPort) {
        return
      }
      this.$confirm('确定将服务器的后台端口号重置为：' + this.admin_port + '，并重启服务器？')
        .then(_ => {
          this.$http.get('/func/setServerPort', {
            params: {
              type: 0, // 0为后台，1为代理
              port: this.admin_port
            }
          })
            .then((res) => {
              if (res.status === 200) {
                this.$notify({
                  message: '代理服务正在重启！',
                  type: 'success'
                })
              }
            })
        })
        .catch(_ => {})
    },
    // 重启服务
    onRestartServer () {
      this.$confirm('确定要重启后台服务，这可能会影响协作者工作！')
        .then(_ => {
          this.$http.get('/func/restartServer', {
            params: {
              type: 0 // 0为后台，1为代理
            }
          })
            .then((res) => {
              if (res.status === 200) {
                this.$notify({
                  message: '后台服务正在重启，稍后请刷新页面！',
                  type: 'success'
                })
              }
            })
        })
        .catch(_ => {})
    },
    // 重启代理
    onRestartProxy () {
      this.$confirm('确定要重启代理服务，这可能会影响协作者工作！')
        .then(_ => {
          this.$http.get('/func/restartServer', {
            params: {
              type: 1 // 0为后台，1为代理
            }
          })
            .then((res) => {
              if (res.status === 200) {
                this.$notify({
                  message: '代理服务正在重启！',
                  type: 'success'
                })
              }
            })
        })
        .catch(_ => {})
    }
  }
}
</script>
